<template>
	<view class="tripItem" @click="goDetail">
		<view class="head">
			<view class="left">
				<trip-tab-group :type="item.trip_type"></trip-tab-group>
			</view>
			<view class="right" @click.stop="goDetail">
				<uni-icons type="eye" size="18" color="#999"></uni-icons>
				<text>详情</text>
			</view>
		</view>
		
		<view class="content">
			<view class="title">
				<view class="day">{{dayShowText}}</view>
				<view class="time">
					<view class="start_time">{{startTime}}</view>
					<view class="time_connect">-</view>
					<view class="end_time">{{endTime}}</view>
				</view>
				<view class="text">出发</view>
			</view>
			<view class="pos pos_start">
				<view class="left">·</view>
				<view class="right">
					<view class="area">{{from_region}}</view>
					<view class="detail">{{item.from_detail}}</view>
				</view>
			</view>
			<view class="pos pos_end">
				<view class="left">·</view>
				<view class="right">
					<view class="area">{{to_region}}</view>
					<view class="detail">{{item.to_detail}}</view>
				</view>
			</view>
			<view class="is_expire" v-if="isExpired">
				<image class="image" src="../../common/images/expired.png" mode="aspectFit"></image>
			</view>
			<view class="price">
				<text class="left">￥</text>
				<text class="right">{{item.predict_price}}</text>
			</view>
		</view>
		
		<view class="info">
			<view class="left">
				<view class="time">
					<uni-dateformat class="left" :date="item.last_modify_date" format='yyyy-MM-dd hh:mm'>
					</uni-dateformat>
					<text class="right" >更新</text>
				</view>
			</view>
			<view class="right">
				<view class="group" v-if="stateFormat(item.status).value==1">
					<view class="every">
						<uni-icons type="heart" color="#a7a7a7" size="16"></uni-icons>
						<text class="font">3</text>
					</view>
					<view class="every">
						<uni-icons type="star" color="#a7a7a7" size="16"></uni-icons>
						<text class="font">3</text>
					</view>
					<view class="every">
						<uni-icons type="chatbubble" color="#a7a7a7" size="16"></uni-icons>
						<text class="font">3</text>
					</view>
				</view>
				
				<view v-else :style="{color:useStateFormat.color}">
					{{useStateFormat.text}}
				</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
import {stateFormat, getTimeText, convertRegion, getHourMinByTimestamp} from "@/utils/common.js"
import { computed } from "vue";

const props = defineProps({
	item:{
		type:Object,
		default(){
			return {}
		}
	}
})

const useStateFormat =  computed(()=>stateFormat(props.item.status))

const from_region = computed(()=>{
	return convertRegion(props.item.from_region)
})

const to_region = computed(()=>{
	return convertRegion(props.item.to_region)
})

// 计算当前行程是否过期
const isExpired = computed(()=>{
	return props.item.start_time <= Date.now() ? true : false
})

const dayShowText = computed(()=>{
	return getTimeText(props.item.start_time)
})

const startTime = computed(()=>{
	return getHourMinByTimestamp(props.item.start_time)
})

const endTime = computed(()=>{
	return getHourMinByTimestamp(props.item.end_time)
})


// 跳转到详情页
const goDetail = ()=>{
	uni.setStorageSync(props.item._id, props.item);
	uni.navigateTo({
		url:"/pages/detail/detail?id="+props.item._id
	})
}

</script>

<style lang="scss" scoped>
.tripItem{
	border:1px solid #e4e4e4;
	border-bottom-width: 3px;
	margin-bottom: 40rpx;
	border-radius: 10rpx;	
	.head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:5rpx 20rpx 5rpx 20rpx;
		background: #f3f3f3;
		// border: 1rpx solid red;
		.right{
			font-size: 28rpx;
			color:$text-font-color-3;
			display: flex;
			align-items: center;			
			padding:5rpx 10rpx;
			text{
				margin-left:10rpx;
				line-height: 1em;
			}
		}
	}
	.content{
		padding:15rpx 20rpx;
		position: relative;
		
		.is_expire{			
			position: absolute;
			top: 60rpx;
			right: 30rpx;
			width: 150rpx;
			height: 100rpx;
			background-color: #f9f9f9;
			.image{				
				width: 100%;
				height: 100%;
				background-color: #fff;
			}
		}
		.price{
			position: absolute;
			bottom: 10rpx;
			right: 50rpx;
			width: 100rpx;
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.left{
				color: #f9d54a;
				font-size: 60rpx;
				font-weight: bold;
			}
			.right{
				color: #ffb142;
				font-size: 60rpx;
				font-weight: bold;
			}
									
		}
		.title {
			// border: 1rpx solid green;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			font-weight: 900;
			letter-spacing: -2rpx; // 添加整体字间距
			padding: 12rpx 0;
			.day {
				font-size: 40rpx;
			}
			.time {
				display: flex;
				justify-content: center;
				align-items: flex-end;
				font-size: 37rpx;
				.start_time,
				.end_time {
					margin: 0 4rpx;						
				}
			}
		}
		
		.pos_start {
			.left {
				color: #FF7D07;
			}
		}
		.pos_end {
			.left {
				color: #5EBB3B;
			}
		}
		
		.pos {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
		
			.left {
				padding-right: 5rpx;
				margin-top: -20rpx;
				font-size: 60rpx;
			}		
			.right {
				.area {
					font-size: 25rpx;
					font-weight: bold;
					color: #333;
				}
				.detail {
					font-size: 25rpx;
					color: #666;
				}
			}
		}
	}
	.info{
		background: #f9f9f9;
		padding:20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color:$text-font-color-3;
		.left{
			.time{
				:deep(.left) {  // 使用深度选择器修改组件内部样式
				    font-size: 26rpx;  // 调整日期文字大小
				    color: $text-font-color-3;
				}
				.right{
					margin-left: 10rpx;
					font-size: 26rpx;  // 调整日期文字大小
				}
			}
		}
		.right{
			.group{
				display: flex;
				align-items: center;
				.every{
					margin-left:20rpx;
					.font{					
						font-size: 26rpx;
					}
				}
			}
		}
	}
}
</style>